import { useEffect, useState } from 'react'
// import { useNavigate } from 'react-router'
import '../zuoye/index.scss'

const Index = (data) => {
    // 下标越小越往前
    const [days, setday] = useState('11')
    const [names, setname] = useState('55')
    const [indexs, setindex] = useState(1)
    const [list, setList] = useState([{ day: '1', name: '哈哈', index: 1 }, { day: '1', name: '哈哈', index: 2 }, { day: '1', name: '哈哈', index: 3 }])
    const submit = () => {
        // let lists=list.push({day:days,name:names,index:indexs})
        setList([...list, { day: days, name: names, index: indexs }])
    }
    return (
        <div className='index'>
            <div className='box'>
                <div className="boxtop">
                    <div className="tops">
                        <div className="left" >日期</div>
                        <input type="text" value={days} onChange={(e) => setday(e.target.value)} />
                    </div>
                    <div className="tops">
                        <div className="left">标题</div>
                        <input type="text" value={names} onChange={(e) => setname(e.target.value)} />
                    </div>
                    <div className="tops">
                        <div className="left" >优先</div>
                        <input type="text" value={indexs} onChange={(e) => setindex(e.target.value)} />
                    </div>
                    <div className="tops">
                        <button onClick={submit}>提交</button>
                    </div>
                </div>
                <div className="box-bottom">
                    <div className="btm">
                        <div className="one">日期</div>
                        <div className="one">标题</div>
                        <div className="one">优先</div>
                    </div>
                    {
                        list.map((item, indexs) => {
                            return (
                                <div className='btms' key={indexs} >
                                    {
                                        item.index == 1 ? <div className="btm">
                                            <div className="one">{item.day}</div>
                                            <div className="one">{item.name}</div>
                                            <div className="ones">{item.index}</div>
                                        </div> : ''
                                    }
                                </div>
                            )
                        })
                    }

                    {
                        list.map((item, indexs) => {
                            return (
                                <div className='btms' key={indexs} >
                                    {
                                        item.index == 2 ? <div className="btm">
                                            <div className="one">{item.day}</div>
                                            <div className="one">{item.name}</div>
                                            <div className="oness">{item.index}</div>
                                        </div> : ''
                                    }
                                </div>
                            )
                        })
                    }
                    {
                        list.map((item, indexs) => {
                            return (
                                <div className='btms' key={indexs} >
                                    {
                                        item.index == 3 ? <div className="btm">
                                            <div className="one">{item.day}</div>
                                            <div className="one">{item.name}</div>
                                            <div className="onesss">{item.index}</div>
                                        </div> : ''
                                    }
                                </div>
                            )
                        })
                    }







                </div>
            </div>
        </div >
    )
}

export default Index